Vue.component('xcform_control_input_upload', {
    template: '<el-form-item \
                  :class="value.fieldjsonObj.xcform_prop_required.value?\'required\':\'\'"\
                  :prop="value.fieldcode" \
                  :rules="control.rules"\
                  :label="value.fieldtitle"> \
                    <el-upload class="upload-demo" action="upload" multiple \
                    :limit="value.fieldjsonObj.xcform_base_property_input_upload.limitFileCount" \
                    :disabled="control.disabled"\
                    :file-list="value.value?value.value:[]" \
                    :on-success="handleSuccess" \
                    :on-remove="handleRemove" \
                    :before-upload="beforeUpload" \
                    :list-type="value.fieldjsonObj.xcform_base_property_input_upload.displayMethod" \
                    > \
                        <section v-if="!control.disabled">\
                        <el-button size="small" type="primary">点击上传</el-button> \
                        <div slot="tip" class="el-upload__tip">{{value.fieldjsonObj.xcform_base_placeholder.value}}</div> \
                        </section> \
                   </el-upload> \
                </el-form-item>',
    props: {
        value: {
            type: Object,
        },
        disabled: {
            type: Boolean,
        },
        fieldfulljson: {
            type: Array,
        },
        xcform_id: {
            type: Number,
        }
    },
    data() {
        var validateFunction = (rule, value, callback) => {
            var that = this;
            that.value.value = (that.value.value) ? that.value.value : "";

            if (that.value.fieldjsonObj.xcform_prop_required.value) {
                if (that.value.value.length == 0) {
                    return callback(new Error('不能为空'));
                }
            }
            return callback();

        };
        return {
            control: {
                disabled: false,
                rules: [{
                    validator: validateFunction,
                    trigger: 'blur'
                }]
            }
        };
    },
    created() {
        var that = this;
        that.control.disabled = that.disabled;
        if (that.value.fieldjsonObj.xcform_prop_readonly.value) {
            that.control.disabled = true;
        }
    },
    mounted() {
        var that = this;
    },
    methods: {
        handleSuccess(response, file, fileList) {
            var that = this;
            file.id = response.id;
            file.url = response.url;
            that._setValue(fileList);
        },
        handleRemove(file, fileList) {
            var that = this;
            that._setValue(fileList);
        },
        beforeUpload(file) {
            var that = this;
            console.log('that.value.fieldjsonObj', that.value.fieldjsonObj);
            // acceptFileTypes
            if (true) {
                var acceptFileTypes = [];
                var errorMsg = "上传文件仅支持: ";
                for (var index in that.value.fieldjsonObj.xcform_base_property_input_upload.acceptFileTypes) {
                    console.log('==', that.value.fieldjsonObj.xcform_base_property_input_upload.acceptFileTypes[index]);
                    switch (that.value.fieldjsonObj.xcform_base_property_input_upload.acceptFileTypes[index]) {
                        case "image":
                            acceptFileTypes.push('image/jpeg');
                            acceptFileTypes.push('image/png');
                            errorMsg += "图片 ";
                            break;
                        case "video":
                            acceptFileTypes.push('video/mp4');
                            acceptFileTypes.push('video/avi');
                            acceptFileTypes.push('video/mov');
                            acceptFileTypes.push('video/wmv');
                            acceptFileTypes.push('video/avi');
                            errorMsg += "视频 ";
                            break;
                    }
                }

                if (acceptFileTypes.length > 0) {
                    var isFound = false;
                    for (var index in acceptFileTypes) {
                        if (file.type === acceptFileTypes[index]) {
                            isFound = true;
                        }
                    }

                    if (isFound === false) {
                        this.$message.error(errorMsg);
                        return false;
                    }
                }

            }

            // limitFileSize
            if (true) {
                var filesize = file.size / 1024 / 1024;
                var limitFileSize = that.value.fieldjsonObj.xcform_base_property_input_upload.limitFileSize;
                if (filesize > limitFileSize) {
                    this.$message.error('当前文件大小是' + filesize + 'M,上传附件大小不能超过 ' + limitFileSize + 'M!');
                    return false;
                }
            }

            return true;
        },
        _setValue(fileList) {
            var that = this;
            var list = [];
            for (var index in fileList) {
                list.push({
                    id: fileList[index]['id'],
                    name: fileList[index]['name'],
                    url: fileList[index]['url']
                });
            }
            that.value.value = list;
        }
    }
});